{#
/**
 * @file
 * banner
 *
 * See banner.wingsuit.yaml for documentation.
 */
#}
{# SETTINGS #}
{% set position_classes ={
  'top_left': '',
  'top_center': 'text-center justify-content-center',
  'top_right': 'text-right justify-content-end',
  'center_left': 'align-items-center',
  'center_center': 'text-center align-items-center justify-content-center',
  'center_right': 'text-right align-items-center justify-content-end',
  'bottom_left': 'align-items-end',
  'bottom_center': 'text-center align-items-end justify-content-center',
  'bottom_right': 'text-right align-items-end justify-content-end',
} %}

{% set teaser %}{{- teaser -}}{% endset %}

{# TEMPLATES #}
<div class="position-relative">
  {{ image }}
  <div class="position-absolute w-100 h-100 d-flex" style="top: 0; left: 0;">
    {% embed "@organisms/container/container.twig" with { teaser: teaser, headline: headline, classes: 'flex-1 d-flex ' ~ position_classes[position]}  %}
      {% block content %}
        <div class="p-6">
          <h2 class="display-4">
            {{ headline }}
          </h2>
          {% if teaser is not empty %}
            <p class="lead">
              {{ teaser }}
            </p>
          {% endif %}
        </div>
      {% endblock %}
    {% endembed %}
  </div>
</div>
